<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>RTSPtoWeb HLS-LL example</title>
  </head>
  <body>
    <h1>RTSPtoWeb HLS-LL example</h1>

    <input type="hidden" name="hlsll-url" id="hlsll-url"
        value="http://localhost:8083/stream/demo/channel/0/hlsll/live/index.m3u8">

    <video id="hlsll-video" autoplay muted playsinline controls
        style="max-width: 100%; max-height: 100%;"></video>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const videoEl = document.querySelector('#hlsll-video')
        const hlsllUrl = document.querySelector('#hlsll-url').value

        if (Hls.isSupported()) {
          const hls = new Hls()
          hls.loadSource(hlsllUrl)
          hls.attachMedia(videoEl)
        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
          videoEl.src = hlsllUrl
        }
      })
    </script>

    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  </body>
</html>
